import React, { Component } from 'react'
import { Form, Input, Button, Row, Col, message, Spin,  } from 'antd';
import { UserOutlined, LockOutlined, EyeOutlined } from '@ant-design/icons';
import { imgcode, queryCurrent, sysLogin } from "@/services/sysLogin"
import styles from "./index.less"
import { connect, history } from "umi"

import { setAuthority } from '@/utils/authority';

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            base64: "",
            LoginBtn: false,
        }
        this.loadImg();
    }
    async loadImg() {
        const { result, success } = await imgcode({
            fontSize: 18,
            width: 35,
            height: 32,
        });
        if (success) {
            this.setState({
                base64: result,
            })
        }
    }
    render() {
        return (
            <Spin spinning={this.state.base64 == ""}>
                <Form
                    className={styles.loginForm}
                    initialValues={{
                        // userName: "haozhi",
                        // userPwd: "123",
                        // imgCode: "1212"
                    }}
                    onFinish={async (values) => {
                        this.setState({
                            LoginBtn: true,
                        })
                        const res = await sysLogin(values);
                        const basePath = window.location.pathname.replace("/user/login", "");
                        if (res.success) {
                            // 设置缓存
                            setAuthority(res.result.currentAuthority == undefined || res.result.currentAuthority == "" ? null : res.result.currentAuthority);
                            localStorage.setItem("authInfo", res.result.token);
                            window.location = basePath;
                        }
                        else {
                            message.warning(res.result)
                        }
                        this.setState({
                            LoginBtn: false,
                        })
                    }}
                >
                    <Form.Item
                        name="userName"

                        rules={[
                            {
                                required: true,
                                message: '请填写用户名',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="userPwd"
                        rules={[
                            {
                                required: true,
                                message: '请填写密码',
                            },
                        ]}
                    >
                        <Input prefix={<LockOutlined />} type="password" placeholder="密码"
                        />
                    </Form.Item>
                    <Row gutter={[0, 0]}>
                        <Col xs={24} sm={24} md={24} lg={12} >
                            <Form.Item
                                name="imgCode"
                                rules={[
                                    {
                                        required: true,
                                        message: '请填写验证码',
                                    },
                                ]}
                            >
                                <Input maxLength={4} prefix={<EyeOutlined />} placeholder="验证码"
                                />
                            </Form.Item>
                        </Col>
                        <Col xs={24} sm={24} md={24} lg={12} >
                            <a>
                                <img style={{ cursor: "pointer" }} onClick={() => {
                                    this.setState({
                                        base64: "",
                                    })
                                    this.loadImg()
                                }} src={this.state.base64} alt="" />
                            </a>
                        </Col>
                    </Row>
                    <Form.Item>
                        <Button loading={this.state.LoginBtn} type="primary" htmlType="submit" block={true}> 登 录</Button>
                    </Form.Item>
                    
                </Form>
            </Spin>
        )
    }
}
export default connect()(Login)